<style>
    .panel-default {
        border-color: #ddd;
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
        box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
        box-sizing: border-box;
    }

    .panel-default .panel-heading {
        position: relative;
        color: #333333;
        background-color: #f5f5f5;
        border-color: #ddd;
        padding: 10px 15px;
        border-bottom: 1px solid transparent;
        border-top-right-radius: 2px;
        border-top-left-radius: 2px;
    }

    .panel-heading .remove {
        /*display: none;*/
        right: 10px;
        top: 10px;
        position: absolute;
        z-index: 2;
        width: 18px;
        height: 18px;
        font-size: 14px;
        line-height: 16px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        background: rgba(0, 0, 0, .3);
        border-radius: 50%;
    }

    .panel-default .row {
        margin: 5px 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    .panel-default .row .l {
        display: flex;
        align-items: center;
        width: 350px;
    }

    .panel-default .row .r {
        display: flex;
        align-items: center;
    }

    .l .input-group {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .wanl-specs-tag {
        background-color: #f8f8f8;
        position: relative;
        padding: 6px 10px;
        display: inline-block;
        margin-right: 10px;
        text-align: center;
        border-radius: 2px;
        cursor: pointer;
    }
    .text-info{
        color: #1688f1;
        background: #d9edf7;
    }
    .table-bordered {
        margin-top: 20px;
        border: 1px solid #f4f4f4;
        text-align: center;
        width: 100%;
    }
</style>
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        {if $is_shop == 1}
        <div class="layui-form-item">
            <label class="layui-form-label">所属店铺</label>
            <div class="layui-input-block">
                <select name="shop_id" lay-verify="required">
                    <option value='' selected>请选择所属店铺</option>
                    {foreach $shops as $k=>$v}
                    <option value='{$v.id}'>{$v.name}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        {/if}
        <div class="layui-form-item">
            <label class="layui-form-label">商品分类</label>
            <div class="layui-input-block">
                <select name="category_id" lay-verify="required">
                    <option value='' selected>请选择分类</option>
                    {foreach $cates as $k=>$v}
                    <option value='{$v.id}'>{$v.name|raw}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input" autocomplete="off" lay-verify="required"
                       placeholder="请输入商品名称" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">展示价格</label>
            <div class="layui-input-block">
                <input type="text" name="show_price" class="layui-input" autocomplete="off" lay-verify="required"
                       placeholder="请输入展示价格" value="">
            </div>
        </div>
       <!-- <div class="layui-form-item">
            <label class="layui-form-label">审核状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="0" title="待审核" checked="">
                <input type="radio" name="status" value="1" title="审核通过">
                <input type="radio" name="status" value="2" title="拒绝" >
            </div>
        </div>-->
        <!--<div class="layui-form-item">
            <label class="layui-form-label">所属店铺 0:平台</label>
            <div class="layui-input-block">
                <input type="text" name="shop_id" class="layui-input" autocomplete="off" lay-verify="required"
                       placeholder="请输入所属店铺  0:平台" value="">
            </div>
        </div>-->
        <!--<div class="layui-form-item">
            <label class="layui-form-label">所属供应商 0:无</label>
            <div class="layui-input-block">
                <input type="text" name="supplier_id" class="layui-input" autocomplete="off" lay-verify="required"
                       placeholder="请输入所属供应商  0:无" value="">
            </div>
        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">详情</label>
            <div class="layui-input-block">
                <textarea name="content" rows="20" class="layui-textarea editor" placeholder="请输入详情"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">规格类型</label>
            <div class="layui-input-block">
                <!--<input type="text" name="status" class="layui-input" autocomplete="off" lay-verify="required"
                       placeholder="请输入0:待审核 1:已通过 2:被拒绝" value="">-->
                <input type="radio" name="spec_type" value="0" lay-filter="spec_type" title="单规格" checked="">
                <input type="radio" name="spec_type" value="1" lay-filter="spec_type" title="多规格">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品规格</label>

            <div class="layui-input-block" id="specContainer0" style="margin-bottom: 15px;" >
                <div class="col-md-12" id="">
                    <table class="table table-bordered">
                        <thead>
                        <tr class="info text-info">
                            <!--<th width="40">图片</th>-->
                            <th width="80">原价</th>
                            <th width="80">现价</th>
                           <th width="80">库存</th>
                            <!-- <th width="80">编码</th>-->
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <!--<td><label class="wanl_sku_img" for="skuImg0"><input type="hidden" name="specs[img][]" class="imgInput" style="display: none;">
                                <div class="skuUpload"><i class="fa fa-picture-o"></i></div>
                            </label></td>-->
                            <td><input type="number" data-rule="required" name="original_price"
                                       class="input-sm form-control wanl-market_price layui-input"></td>
                            <td><input type="number" data-rule="required" name="price"
                                       class="input-sm form-control wanl-price layui-input"></td>
                            <td><input type="number" data-rule="required" name="stock"
                                       class="input-sm form-control wanl-stock layui-input"></td>
                            <!--<td><input type="text" name="specs[sku_code][]" class="input-sm form-control wanl-sn layui-input"></td>-->
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
            <div class="layui-input-block" id="specContainer1" style="display: none;">
                <div class="layui-col-xs6">
                    <input type="hidden" name="specs_all" >
                    <input type="text" name="sku_json" id="skuJson" class="layui-input" autocomplete="off"
                           placeholder="多个规格用空格隔开" value="">
                </div>
                <button type="button" class="layui-btn layui-btn-normal layui-col-xs3" id="addspec">添加规格</button>
                <br>
                <!--<div class="panel panel-default" style="margin-top: 20px;">
                    <header class="panel-heading" style="background: #ddd">
                        <b>颜色</b> <span title="移除" class="remove">×</span>
                    </header>
                    <div class="row">
                        <div class="l">
                            <div class="input-group" >
                                <input type="text" placeholder="多规格以空格隔开" class="form-control layui-input">
                                <span class="input-group-addon pointer"><i class="fa fa-plus"></i></span>
                            </div>
                        </div>
                        <div class="r">
                            <div class="wanl-specs-tag">
                                红色<span title="移除" class="remove">×</span>
                            </div>
                            <div class="wanl-specs-tag">
                                绿色<span title="移除" class="remove">×</span></div>
                        </div>
                    </div>
                </div>-->
                <div class="panel panel-default" style="margin-top: 20px;" id="specDetail"></div>
                <div class="col-md-12" id="specTable"></div>
                <!--<div class="col-md-12">
                    <table class="table table-bordered">
                        <thead>
                        <tr class="info text-info">
                            <th width="80"> 颜色</th>
                            <th width="80"> 大小</th>
                            <th width="40">图片</th>
                            <th width="80">原价</th>
                            <th width="80">现价</th>
                            <th width="80">库存</th>
                            <th width="80">重量(k)</th>
                            <th width="80">编码</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>红色</td>
                            <td>XXL</td>
                            <td>&lt;!&ndash;&ndash;&gt; <input type="file" id="skuImg0" accept="image/*" style="display: none;"> <label
                                    for="skuImg0" class="wanl_sku_img">
                                <div class="skuUpload"><i class="fa fa-picture-o"></i></div>
                            </label></td>
                            <td><input type="number" data-rule="required" name="row[market_price][]"
                                       class="input-sm form-control wanl-market_price layui-input"></td>
                            <td><input type="number" data-rule="required" name="row[price][]"
                                       class="input-sm form-control wanl-price layui-input"></td>
                            <td><input type="number" data-rule="required" name="row[stocks][]"
                                       class="input-sm form-control wanl-stock layui-input"></td>
                            <td><input type="number" name="row[weigh][]" class="input-sm form-control wanl-weigh layui-input"></td>
                            <td><input type="text" name="row[sn][]" class="input-sm form-control wanl-sn layui-input"></td>
                        </tr>
                        <tr>
                            <td>绿色</td>
                            <td>XXL</td>
                            <td>&lt;!&ndash;&ndash;&gt; <input type="file" id="skuImg1" accept="image/*" style="display: none;"> <label
                                    for="skuImg1" class="wanl_sku_img">
                                <div class="skuUpload"><i class="fa fa-picture-o"></i></div>
                            </label></td>
                            <td><input type="number" data-rule="required" name="row[market_price][]"
                                       class="input-sm form-control wanl-market_price layui-input"></td>
                            <td><input type="number" data-rule="required" name="row[price][]"
                                       class="input-sm form-control wanl-price layui-input"></td>
                            <td><input type="number" data-rule="required" name="row[stocks][]"
                                       class="input-sm form-control wanl-stock layui-input"></td>
                            <td><input type="number" name="row[weigh][]" class="input-sm form-control wanl-weigh layui-input"></td>
                            <td><input type="text" name="row[sn][]" class="input-sm form-control wanl-sn layui-input"></td>
                        </tr>
                        </tbody>
                    </table>
                    <div><span>
																	是否要批量设置？
																</span></div>
                </div>-->
            </div>
        </div>
       <!-- <div class="layui-form-item">
            <label class="layui-form-label">规格选项</label>
            <div class="layui-input-block">
                <input type="text" name="sku_json" class="layui-input" autocomplete="off" lay-verify="required"
                       placeholder="请输入规格选项" value="">
            </div>
        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">排序值</label>
            <div class="layui-input-block">
                <input type="text" name="sort" class="layui-input" autocomplete="off" lay-verify="required"
                       placeholder="请输入排序字段  从大到小" value="50">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品主图</label>
            <div class="layui-input-block layuimini-upload">
                <input name="img" class="layui-input layui-col-xs6" lay-verify="required" placeholder="请上传商品主图">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn" data-upload="img" data-upload-number="one" data-upload-exts="ico|png|jpg|jpeg"><i class="fa fa-upload"></i> 上传</a></span>
                    <span><a class="layui-btn layui-btn-normal" id="select_logo_image" data-upload-select="img" data-upload-number="one"><i class="fa fa-list"></i> 选择</a></span>
                </div>
            </div>
        </div>
        <!--<div class="layui-form-item">
            <label class="layui-form-label">销量</label>
            <div class="layui-input-block">
                <input type="text" name="sales" class="layui-input" autocomplete="off" lay-verify="required"
                       placeholder="请输入销量" value="0">
            </div>
        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">上架状态</label>
            <div class="layui-input-block">
                <input type="radio" name="is_sale" value="0" title="下架">
                <input type="radio" name="is_sale" value="1" title="上架" checked="">
            </div>
        </div>
        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>